<template>
    <section class="main">
        <div class="crumbs">
           <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item>
            </el-breadcrumb>
       </div>
       <div class="container">
           <span>{{$t('i18n.tips')}}</span>
           <el-button type="primary" @click="$i18n.locale=$i18n.locale=='zh'? 'en': 'zh';">{{ $t('i18n.btn')}}</el-button>
           <div class="list">
               <h2>{{$t('i18n.title1')}}</h2>
               <p>{{$t('i18n.p1')}}</p>
               <p>{{$t('i18n.p2')}}</p>
               <p>{{$t('i18n.p3')}}</p>
            </div>
            <h2>{{$t('i18n.title2')}}</h2>
           <div>
                <i18n path="i18n.info" tag="p">
                    <a place="action" href="https://element.eleme.cn/2.0/#/zh-CN/component/i18n">{{$t('i18n.value')}}</a>
                </i18n>
            </div>
       </div>
    </section>
</template>
<script>
export default {
    
}
</script>
<style scoped>
.list{
    padding: 30px 0;
}
.list p{
    margin-bottom: 20px;
}
a{
    color: #409eff;
}
</style>
